<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui-1.3.5/themes/icon.css" />
<script src="easyui-1.3.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="easyui-1.3.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="easyui-1.3.5/datagrid-detailview.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">add</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destoryItem()">remove</a>
</div>
<table id="dg" toolbar="#toolbar" title="My Users" style="width:550px;height:250px" url="get_users.php" fitColumns="true" singleSelect="true">
	<thead>
		<tr>
			<td field="firstname">firstname</td>
			<td field="lastname">lastname</td>
			<td field="email">email</td>
			<td field="phone">phone</td>
		</tr>
	</thead>
</table>
</body>
<script type="text/javascript">
$("#dg").datagrid({
	view: detailview,
	detailFormatter: function(index, row) {
		return "<div id='ddv'></div>";
	},
	onExpandRow:function(index,row){
		var ddv=$(this).datagrid("getRowDetail",index).find("ddv.div");
		ddv.pannel({
			boder:false,
			cache:true,
			href:"show_form.php?index="+index,
			load:function(){
				$("#dg").datagrid("fixDetailRow",index);
				$("#dg").datagrid("selectRow",index);
				$("#dg").datagrid("getRowDetail",index).find("form").form("load",row);
			},
		});
		$("#dg").datagrid("fixDetailRow",index);
	},
});

function newItem() {

}

function destoryItem() {

}
</script>

</html>